<template>
    <view class="content">
        <van-nav-bar :title="scrolling? navBarTitle : '' " left-arrow @click-left="onClickLeft"></van-nav-bar>
        <scroll-view class="scroll-content" scroll-y :lower-threshold="80" @scroll="scrollPage"  show-scrollbar="false">
            <loading :loadingIsShow="loadingIsShow" v-if="!isrefresher"></loading>
            <view v-show="!loadingIsShow ">
                <!-- <view class="pageTop">
                    <view class="tab-bar">
                        <view
                            class="tabbar-item"
                            v-for="(item, index) in tabBarList"
                            @click="changeTab(index, $event, item.name)"
                            :class="{ active: index === currentIndex }"
                            :key="index">
                            {{ item.name }}
                        </view>
                    </view>
                </view> -->
                <view class="middle">
                    <view class="orderStatus">{{ navBarTitle }}</view>
                    <view class="describe" v-if="expresslist.length > 0">
                        <view>
                            <view class="describeLeftTop">
                                <view class="selfPickName">{{merchantInfo.merchantName}}</view>
                                <view class="selfPickTel" @tap="contactSelfPickPoint"> <img
                                    src="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/selfPickTel.png"
                                    alt=""
                                    style="width: 14px; height: 14px; margin-left: 22px; margin-right: 10px;">
                                    联系自提点
                                </view>
                            </view>
                            <view class="describeLeftbottom"> {{merchantInfo.address?merchantInfo.address:(merchantInfo.province +merchantInfo.city + merchantInfo.district)}} </view>
                        </view>
                        <view class="daohangIcon"  @tap="toMap(0)">
                            <img
                                src="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/self_pickup.png"
                                alt=""
                                style="width: 16px; height: 14px;">
                        </view>
                    </view>
                </view>
                <!-- <view class="logistics">
                    <view class="service-timeline" style="margin-top: 30rpx;">
                        <view v-for="(item, index) in expresslist" :key="index"  :class="['timeline-item',index === (expresslist.length - 1)? 'last-item' : '']">
                            <view :class="['timeline-dot', getDotClass(item.nodeType, index)]"></view>
                            <view :class="['timeline-line',index === (expresslist.length - 1)? 'last-item-timeline-line' : '',index===0?'timeline-line-active':'']" :style="{ height: timelineLinesHeight[index]  }"></view> 
                                <view class="timeline-content" :id="'timeline_content'+index">
                                    <h3 :class="['timeline-text',index===0?'timeline-text-active':'']" >{{ item.nodeTypeTexts }}</h3>
                                    <p class="timeline-desc">{{ item.description }} <span v-if="item.location"> 地址：{{item.location}} </span> <span v-if="item.contactPhone">如有问题请联系( <span style="color: #0094D9; font-size: 24rpx;">{{item.contactPhone}}</span> )</span> </p>
                                    <p class="timeline-time">{{ item.handleTime }}</p>
                                </view>
                        </view>
                    </view>
                    <view class="service-timeline" style="margin-top: 30rpx;">
                        <view v-for="(item, index) in expresslist" :key="index" :class="['timeline-item', index === (expresslist.length - 1)? 'last-item' : '']">
                            <view :class="['timeline-dot', getDotClass(item.nodeType, index)]"></view>
                            <view :class="['timeline-line', index === (expresslist.length - 1)? 'last-item-timeline-line' : '', index === 0? 'timeline-line-active' : '']" :style="{ height: timelineLinesHeight[index] }"></view>
                            <view class="timeline-content" :id="'timeline_content' + index">
                                <h3 :class="['timeline-text', index === 0? 'timeline-text-active' : '']">{{ item.nodeTypeTexts }}</h3>
                                <p class="timeline-desc" style="white-space: pre-line;">{{ item.description }} <span v-if="item.location"> 地址：{{ item.location }}</span> <span v-if="item.contactPhone">如有问题请联系( <span style="color: #0094D9; font-size: 24rpx;">{{ item.contactPhone }}</span> )</span> </p>
                                <p class="timeline-time">{{ item.handleTime }}</p>
                            </view>
                        </view>
                    </view>
                </view> -->
                <view class="logistics" v-if="expresslist.length >0">
                    <view class="service-timeline" style="margin-top: 30rpx;">
                        <view v-for="(item, index) in expresslist" :key="index" >
                            <view :class="['timeline-item', index === (expresslist.length - 1)? 'last-item' : '']" :id="'timeline-item'+index">
                                <view :class="['timeline-dot', getDotClass(item.nodeType, index)]"></view>
                                <view :class="['timeline-line', index === (expresslist.length - 1)? 'last-item-timeline-line' : '', index === 0? 'timeline-line-active' : '']"></view>
                                <view class="timeline-content" :id="'timeline_content' + index">
                                    <h3 :class="['timeline-text', index === 0? 'timeline-text-active' : '']">{{ item.nodeTypeTexts }} <span v-if="item.nodeType == 'ARRIVED' && pickupCode && expresslist[expresslist.length - 1].nodeType !== 'PICKED_UP'  && !expresslist.some(i => i.nodeType === 'PICKED_UP')">(取件码 {{pickupCode}})</span> </h3>
                                    <template v-if="item.descList && item.descList.length > 0">
                                        <view :id="'time_content_desc' + index">
                                            <p class="timeline-desc timeline-desc-with-dot" v-for="(descItem, descIndex) in item.descList" :key="descIndex">
                                                {{ descItem.description }}
                                                <a class="timeline-time">{{ descItem.handleTime }}</a>
                                            </p>
                                        </view>
                                    </template>
                                    <template v-else>
                                        <p class="timeline-desc">{{ item.description }} <span v-if="item.location"> 地址：{{ item.location }}</span> <span v-if="item.contactPhone">如有问题请联系( <span style="color: #0094D9; font-size: 24rpx;">{{ item.contactPhone }}</span> )</span> </p>
                                    </template>
                                    <p class="timeline-time" v-if="!item.descList || item.descList.length ==0">{{ item.handleTime }}</p>
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
                <view class="logistics" v-else>
                      <van-empty
                        class="custom-image"
                        image="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/addressEmpty0114.png"
                        :description="logisticsTips" />
                </view>
                <!-- <view class="orderWrapper">
                    <view class="goodsBox">
                        <view class="goodsList">
                            <view class="goodsWraper clearfix" v-for="(item, index) in cartList" :key="index" :id="item.Id">
                                <view class="wraper_left">
                                    <view class="goodsPic">
                                        <img class="img" :src="item.imgurl" mode="widthFix" />
                                    </view>
                                    <view class="goodsText">
                                        <view class="goodsTop">
                                            <view class="goods_T">{{ item.title }}</view>
                                            <view class="goods_price">￥{{ item.price }}</view>
                                        </view>
                                        <view class="googsMiddle">
                                            <view class="goods_specs">{{ item.specs }}</view>
                                            <view class="goods_num">X {{ item.num }}</view>
                                        </view>
                                        <view class="goodsBottom">
                                            <view class="jifen_box"><img
                                                                        src="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/jinbi_gray1127.png"
                                                                        alt=""
                                                                        style="height: 10px; width: 10px;margin-right: 6px;" />
                                                {{ item.jifen }} + ￥{{ item.money }}</view>
                                        </view>
                                    </view>
                                </view>
                            </view>
                        </view>
                        <view class="price_detail clearfix" v-if="show">
                            <view class="price_detail_title">订单金额</view>
                            <view class="price_detail_content">
                                <view class="price_detail_box all">
                                    <view class="price_detail_name">商品总额</view>
                                    <view class="price_detail_num num">￥584</view>
                                </view>
                                <view class="price_detail_box yunfei">
                                    <view class="price_detail_name">运费</view>
                                    <view class="price_detail_num num" v-if="yunfei !== 0">￥{{ yunfei }}</view>
                                    <view class="price_detail_text" v-if="yunfei === 0">免运费</view>

                                </view>
                                <view class="price_detail_box couponAct">
                                    <view class="price_detail_top">
                                        <view class="price_detail_name">优惠活动</view>
                                        <view class="price_detail_tips">满300减20</view>
                                    </view>
                                    <view class="price_detail_num num_o">- ￥20</view>
                                </view>
                                <view class="price_detail_box coupon">
                                    <view class="price_detail_top">
                                        <view class="price_detail_name">优惠券</view>
                                        <view class="price_detail_tips">商品150优惠券</view>
                                    </view>
                                    <view class="price_detail_num num_o">-￥150 </view>
                                </view>
                            </view>
                            <view class="payment" v-if="!isCancel">
                                <view class="payment_top" @click="openPayment">
                                    <view class="price_detail_name">实付金额</view>
                                    <view class="paidAmount">
                                        ¥262 <img
                                            src="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/shangcheng/jinbi.png"
                                            alt=""
                                            style="height: 13px; width: 13px;margin-left: 8px; margin-right: 6px;" />
                                        1520

                                    </view>
                                </view>
                            </view>
                            <view class="order_Detail" v-if="!isCancel">
                                <view class="price_detail_title">订单信息</view>
                                <view class="order_Detail_content">
                                    <view class="order_Detail_box">
                                        <view class="price_detail_name">订单编号</view>
                                        <view class="order_detail_num">
                                            <view class="code">{{ orderCode }}</view>
                                            <view class="" style=" color: #888888; margin: 0px 10px;">|</view>
                                            <view class="copy" @tap="copytext">复制</view>
                                        </view>
                                    </view>
                                    <view class="order_Detail_box">
                                        <view class="price_detail_name">下单时间</view>
                                        <view class="code">2024-05-17 10:23:16</view>
                                    </view>
                                </view>
                            </view>
                        </view>
                        <view class="checkDetail" @tap="showOrder" v-if="show">收起订单信息 <van-icon name="arrow-up" /> </view>
                        <view class="checkDetail" @tap="showOrder" v-if="!show">查看全部订单信息 <van-icon name="arrow-down" />
                        </view>
                    </view>
                </view> -->
            </view>
        </scroll-view>
        <logisticsPopup :show="showlogisticsPopup" @closePopup="closePopup" :num="num"></logisticsPopup>
    </view>
</template>
<script>

import logisticsPopup from '@/mycomponents/shangcheng/logisticsPopup.vue'
import {getOrderLogisticsApi} from '@/api/order'
import loading from '@/mycomponents/loading.vue'

export default {

    components: {
        logisticsPopup,
        loading
    },

    data () {
        return {
            isrefresher: false,
            loadingIsShow: true,
            loadingIsShowPage: true,
            steps: [],  // 添加steps数据初始化
            showlogisticsPopup: false,
            navBarTitle: '物流详情',
            scrolling: false,
            currentIndex: 0,
            tabBarList: [
                {
                    name: '包裹',
                    key: '0'
                },
                {
                    name: '包裹',
                    key: '1'
                }
            ],
            orderCode: 'LJL2575773737',
            num: 2,
            nodeType: '提货成功',
            merchantInfo:{
                merchantName:'阳光超市连锁',
                address:'运城滨湖一号商业街门面房4号门面运城快递驿站',
                contactPhone:'15632642154',
                latitude:'',
                longitude:''
            },
            active: 0,
            // steps: [
            //     {
            //         text: '已签收',
            //         desc: '快件已被【本人】签收 地址：运城滨湖一号商业街门面房4号门面运城快递驿站，如有问题请联系联系15632642154）【来自代收点】',
            //         inactiveIcon: 'location-o',
            //         activeIcon: 'success'
            //     },
            //     {
            //         text: '已预约',
            //         desc:'服务人员王涛（15632642154）已服务',
            //         time: '2021-12-21 14:30',
            //     },
            //     {
            //         text: '已派单',
            //         desc: '社区家政服务公司（0359-2365235）派单给服务人员王涛（15632642154）',
            //         time: '2021-12-21 14:30'
            //     },
            //     {
            //         text: '已服务',
            //         desc: '服务人员王涛（15632642154）已服务',
            //         time: '2021-12-21 14:30'
            //     },
            // ],
            expresslist: {
                // order_no: '1q213232132',
                // de_company: '17',
                // wuliu_no: '73584y357349',
                // // list: [
                // //     {
                // //         display: '0', // 已签收 判断是否加class条件
                // //         nodeType: 'PICKED_UP',
                // //         description: '快件已被【本人】签收，如有问题请联系联系15632642154）【来自代收点】',
                // //         time: '2020-06-20 18:33:42',
                // //         operator:'本人',
                // //         location:'运城滨湖一号商业街门面房4号门面运城快递驿站',
                // //         contactPhone:'15632642154'
                // //     },
                // //     {
                // //         display: '1',
                // //         nodeType: 'ARRIVED',
                // //         description: '您的包裹已存放至【滨湖一号门面房4号门面运城滨湖一号自提点】取它回家！如有问题请联系自提点（15632642154）',
                // //         time: '2020-06-20 18:33:42',
                // //         operator:'',
                // //         location:'',
                // //         contactPhone:'15632642154'
                // //     },
                // //     {
                // //         display: '2',
                // //         nodeType: 'IN_TRANSIT',
                // //         description: '您的订单有乐生活分拣中心【乐生活分拣】已分拣完成， 正配送至自提点，请耐心等待！',
                // //         time: '2020-06-20 18:33:42',
                // //         operator:'',
                // //         location:'',
                // //         contactPhone:''
                // //     },
                //     // {
                //     //     display: '3',
                //     //     nodeType: 'PROCESSING',
                //     //     description: '打包完成',
                //     //     operator:'',
                //     //     location:'',
                //     //     contactPhone:'',
                //     //     descList:[
                //     //         {
                //     //             stepNum:'0',
                //     //             text:'打包完成',
                //     //             time: '2020-06-20 18:33:42'
                //     //         },
                //     //         {
                //     //             stepNum:'1',
                //     //             text:'扫描完成',
                //     //             time: '2020-06-20 18:33:42'
                //     //         },
                //     //         {
                //     //             stepNum:'2',
                //     //             text:'您的订单已打印完成',
                //     //             time: '2020-06-20 18:33:42'
                //     //         },
                //     //     ],
                //     //     time: '2020-06-20 18:33:42'
                //     // },
                // //     {
                // //         display: '5',
                // //         nodeType: '',
                // //         description:'扫描完成',
                // //         time: '2020-06-20 18:33:42',
                // //         operator:'',
                // //         location:'',
                // //         contactPhone:''
                // //     },
                // //     {
                // //         display: '6',
                // //         nodeType: '',
                // //         description:'您的订单已打印完成',
                // //         time: '2020-06-20 18:33:42',
                // //         operator:'',
                // //         location:'',
                // //         contactPhone:''
                // //     },
                // //     {
                // //         display: '7',
                // //         nodeType: 'ORDER_PAID',
                // //         description: '你提交了订单，请等待仓库出货',
                // //         time: '2020-06-20 18:33:42',
                // //         operator:'',
                // //         location:'',
                // //         contactPhone:''
                // //     }
                // // ]
            },
            cartList: [
                // {
                //     Id: 11,
                //     imgurl: 'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/shangcheng/judge01.png',
                //     title: '黄芪杞姜枣糕红枣',
                //     price: '15',
                //     num: '1',
                //     jifen: 190,
                //     money: '120',
                //     specs: '口味一：五斤装',
                //     isShouQing: false,
                //     isXiajia: false
                // },
                // {
                //     Id: 12,
                //     imgurl: 'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/shangcheng/judge01.png',
                //     title: '黄芪杞姜枣糕红枣枸杞 口味一：五斤装',
                //     price: '16',
                //     num: '1',
                //     jifen: 190,
                //     money: '120',
                //     specs: '口味一：五斤装',
                //     isShouQing: false,
                //     isXiajia: false
                // },
                // {
                //     Id: 13,
                //     imgurl: 'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/shangcheng/judge01.png',
                //     title: '黄芪杞姜枣糕红枣枸杞 口味一：',
                //     price: '16',
                //     num: '3',
                //     jifen: 190,
                //     money: '120',
                //     specs: '口味1：5斤装',
                //     isShouQing: false,
                //     isXiajia: false
                // }

            ],
            showAll: true,
            textHeight: 0,
            textHeight0: 0,
            textHeight1: 0,
            textHeight2: 0,
            textHeight3: 0,
            textHeight4: 0,
            show: true,
            yunfei: 0,
            makeOrderIcon:'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/makeOrderIcon.png',
            selfPointIcon:'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/selfPointIcon.png',
            transportIcon:'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/transportIcon.png',

            activeIcon:
                'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/goodsChecked1126.png',  
            inactiveIcon: 'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/noCheck0113.png', 
            processCurrentDot:'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/processDot.png',
            timelineLinesHeight:[],
            orderId:undefined,
            pickupCode:'554298',
            logisticsTips:''
        }
    },

    computed: {},

    watch: {},
    onLoad (data) {
        
        this.params = JSON.parse(decodeURIComponent(data.params))
        console.log(this.params,'params')
        this.orderId = this.params.orderId
        // this.getOrderLogisticsInfo(this.orderId)
        // if(this.expresslist.length>0){
        //     const updatePromises = [];
        //     this.expresslist.forEach((item, index) => {
        //         updatePromises.push(this.setTimelineLineHeight(index));
        //     })
        //     Promise.all(updatePromises).then(() => {
        //     // 在这里可以添加一些依赖于高度都更新完成后的逻辑，比如检查视图是否正确显示高度等
        //     console.log('所有竖线高度更新完成');
        // });
        // }
    },
    onReady () {
        
    },
    onShow(){
        this.onRefresherMethod()
    },

    methods: {
        // 滑动
        scrollPage (e) {
            console.log(e.detail.scrollTop, this.scrolling)
            if (e.detail.scrollTop > 25 && !this.scrolling) {
                this.scrolling = true
            } else if ((e.detail.scrollTop <= 25 && this.scrolling) || (e.detail.scrollTop <= 25 && !this.scrolling)) {
                this.scrolling = false
            }
        },
        onRefresherMethod() {
            if (!this.isrefresher) {
                this.loadingIsShow = true
            }
            // 调用接口并处理结果
            this.getOrderLogisticsInfo(this.orderId)
                .then((res) => {
                    console.log('接口调用完成', res);
                    // 若需要对非200状态做特殊处理，可在此添加条件判断
                    if (res.code !== 200) {
                        console.log('接口返回非200状态:', res);
                        this.expresslist = []; // 示例：清空数据
                        this.logisticsTips = res.message; // 更新提示信息
                    }
                })
                .catch((err) => {
                    console.error('接口调用异常:', err);
                })
                .finally(() => {
                    // **核心逻辑**：无论接口状态如何，均执行以下代码
                    console.log('执行finally逻辑');
                    this.loadingIsShow = false; // 隐藏加载状态
                    this.time = setTimeout(() => {
                        this.isrefresher = false;
                    }, 200);

                });
            // Promise.all([this.getOrderLogisticsInfo(this.orderId)]).then(() => {
            //     console.log('所有api加载完成')
            //     this.loadingIsShow = false
            //     this.loadingIsShowPage = false
            //     // 关闭加载状态 (转动的圈)，需要一点延时才能关闭
            //     this.time = setTimeout(e => {
            //         this.isrefresher = false
            //     }, 2000)
            // })
            // .catch(error => {
            //     this.loadingIsShow = false
            //     this.time = setTimeout(e => {
            //         this.isrefresher = false
            //     }, 3000)
            //     // 处理任何一个 Promise 失败的情况
            //     console.error('获取数据失败:', error);
            // });
        },

     
        contactSelfPickPoint() {
            const phoneNumber = this.merchantInfo.contactPhone;
            if (phoneNumber) {
                wx.makePhoneCall({
                    phoneNumber: phoneNumber,
                    success: () => {
                        console.log('拨打电话成功');
                    },
                    fail: (err) => {
                        console.error('拨打电话失败', err);
                        wx.showToast({
                            title: '拨打电话失败',
                            icon: 'none',
                            duration: 2000
                        });
                    }
                });
            } else {
                wx.showToast({
                    title: '未获取到自提点联系电话',
                    icon: 'none',
                    duration: 2000
                });
            }
        },
        functions(){
            const query = wx.createSelectorQuery().in(this)
            this.expresslist.forEach((item, index) => {
                console.log(`'#con4_text` + index + `'`)
                query.select(`'#con4_text` + index + `'`).boundingClientRect((res) => {
                    if (res) {
                        console.log('元素高度为:', res.height)
                    // this.`textHeight + index` = res.height
                    // `${this.textHeight}${index}`=res.height
                    }
                }).exec()
                item.nodeTypeTexts=this.getNodeTypeText(item.nodeType)
                item.nodeStatusTexts=this.getNodeStatusText(item.nodeStatus)
            })
        },
        // 流程图左侧的竖线
        getItemHeight(index) {
            return new Promise((resolve) => {
                const query = wx.createSelectorQuery().in(this);
                query.select(`#timeline-item${index}`).boundingClientRect((rect) => {
                    console.log(rect,'rect')
                    const contentHeight = rect?.height ||0;
                    resolve(contentHeight + 30); 
                }).exec();
            });
        },
         // 流程图左侧的竖线
         getItemDescHeight(index) {
            return new Promise((resolve) => {
                const query = wx.createSelectorQuery().in(this);
                query.select(`#time_content_desc${index}`).boundingClientRect((rect) => {
                    console.log(rect,'rect---')
                    const contentHeight = rect?.height || 0;
                    resolve(contentHeight + 30); 
                }).exec();
            });
        },
        async setTimelineLineHeight(index) {
            // const height = await this.getItemHeight(index);
            // this.timelineLinesHeight[index] = height * 2 + 74 + 'rpx'; 
            // this.$forceUpdate();
            const item = this.expresslist[index];
            let height;
            if (item.descList && item.descList.length > 0) {
                const descHeight = await this.getItemDescHeight(index);
                height = descHeight + 30; 
            } else {
                height = await this.getItemHeight(index);
            }
            this.timelineLinesHeight[index]= height*2 + 74 +'rpx' 
            this.$forceUpdate()
        },
        // // 物流左侧的线条
        // async setTimelineLineHeight(index) {
        //     const height = await this.getItemHeight(index);
        //     console.log(height,'kkkll')
        //     this.timelineLinesHeight[index]= height*2 + 74 +'rpx' //37---74padding-bottom
        //     console.log(this.timelineLinesHeight)
        //     this.$forceUpdate()
        //     // return new Promise((resolve) => {
        //     //     // 可以简单地通过 setTimeout 模拟等待视图更新完成，实际可能需要更精准的判断机制
        //     //     setTimeout(() => {
        //     //         resolve();
        //     //     }, 0);
        //     // });
        // },
        formatDateSE(timeStr) {
            console.log(timeStr, 'timeStr')
            if (timeStr !== null && timeStr !== undefined) {
                const date = new Date(timeStr);
                const year = date.getFullYear();
                const month = ("0" + (date.getMonth() + 1)).slice(-2);
                const day = ("0" + date.getDate()).slice(-2);
                const hours = ("0" + date.getHours()).slice(-2);
                const minutes = ("0" + date.getMinutes()).slice(-2);
                const seconds = ("0" + date.getSeconds()).slice(-2);
                const formatDate = `${year}.${month}.${day} ${hours}:${minutes}:${seconds}`;
                return formatDate;
            } else {
                console.error('传入的时间格式不正确，期望为合法的时间字符串');
                return '';
            }
        },
        // 返回键
        onClickLeft () {
            uni.navigateBack()
        },
        changeTab (index, e, name) {
            this.currentIndex = index
            console.log(index, e, name)
        },
        openPopup () {
            this.showlogisticsPopup = true
        },
        closePopup () {
            this.showlogisticsPopup = false
        },
        getDisplayByNodeType(nodeType) {
            const displayMap = {
                'ORDER_PAID': '7',
                'PROCESSING': '3',
                'IN_TRANSIT': '2',
                'ARRIVED': '1',
                'PICKED_UP': '0',
                'CANCELLED': '4'
            };
            return displayMap[nodeType] || '';
        },
        getNodeTypeText(nodeType) {
            const nodeTypeMap = {
                'ORDER_PAID': '已下单',
                'PROCESSING': '仓库处理中',
                'IN_TRANSIT': '运输中',
                'ARRIVED': '已到达自提点',
                'PICKED_UP': '已签收',
                'CANCELLED': '已取消',
            }
            return nodeTypeMap[nodeType] || '未知状态'
        },
        getNodeStatusText(nodeStatus) {
            const nodeStatusMap = {
                'NORMAL': '正常',
                'ABNORMAL': '异常',
                'DELAYED': '延迟',               
            }
            return nodeStatusMap[nodeStatus] || '未知状态'
        },
        // 获取物流节点的样式类名 <view :class="['timeline-dot', getDotClass(item.nodeType, index)]"></view>
        getDotClass(nodeType, index) {
            if (index === 0) return 'timeline-dot-active';
            
            const typeMap = {
                'ORDER_PAID': 'timeline-dot-order',
                'PROCESSING': 'timeline-dot-order',
                'ARRIVED': 'timeline-dot-selfPoint',
                'IN_TRANSIT': 'timeline-dot-transport'
            };
            
            return typeMap[nodeType] || 'timeline-dot-normal';
        },
        // 复制
        copytext (text) {
            var that = this
            wx.setClipboardData({
                data: that.orderCode,
                success: function (res) {
                    wx.showToast({
                        title: '复制成功',
                        icon: 'success',
                        duration: 2000
                    })
                }
            })
        },
        // 跳转自提点
        toMap(){
            console.log(this.merchantInfo,'this.merchantInfo')
            const params = {
              merchantLocation: {
                latitude: this.merchantInfo.latitude,
                longitude: this.merchantInfo.longitude
              },
              userLocation:{
                latitude: '',
                longitude: ''
              }
            }
            uni.navigateTo({
                url:
                '/pages/shoppingCart/map?params=' +
                encodeURIComponent(JSON.stringify(params))
            })
        },
        //
        showOrder () {
            this.show = !this.show
        },
        /**
         * 查看物流接口
         */
        getOrderLogisticsInfo(orderId) {
            return new Promise((resolve, reject) => {
                getOrderLogisticsApi(orderId).then(res => {
                    console.log(res, '物流信息');
                    if (res.code === 200) {
                        this.merchantInfo = res.data?.merchant || null;
                        this.pickupCode = res.data?.pickupCode || '';
                        const originalDataL = res.data.mpLogisticsNodesList;

                        const newData = [];
                        let processingIndex = -1;

                        console.log(originalDataL, 'originalData')
                        const originalData = originalDataL.reverse() || [];


                        originalData.forEach(item => {
                            if (item.nodeType === 'PROCESSING') {
                                if (processingIndex === -1) {
                                    // 第一次遇到 PROCESSING 类型节点
                                    const newProcessingItem = {
                                        ...item,
                                        display: this.getDisplayByNodeType(item.nodeType),
                                        handleTime: this.formatDateSE(item.createTime),
                                        nodeTypeTexts: this.getNodeTypeText(item.nodeType),
                                        nodeStatusTexts: this.getNodeStatusText(item.nodeStatus),
                                        descList: [
                                            {
                                                description: item.description,
                                                handleTime: this.formatDateSE(item.createTime)
                                            }
                                        ]
                                    };
                                    newData.push(newProcessingItem);
                                    processingIndex = newData.length - 1;
                                } else {
                                    // 后续遇到 PROCESSING 类型节点，添加到之前的 PROCESSING 节点的 descList 中
                                    newData[processingIndex].descList.push({
                                        description: item.description,
                                        handleTime: this.formatDateSE(item.createTime)
                                    });
                                }
                            } else {
                                // 非 PROCESSING 类型节点直接添加到新数组
                                newData.push({
                                    ...item,
                                    display: this.getDisplayByNodeType(item.nodeType),
                                    handleTime: this.formatDateSE(item.createTime),
                                    nodeTypeTexts: this.getNodeTypeText(item.nodeType),
                                    nodeStatusTexts: this.getNodeStatusText(item.nodeStatus)
                                });
                            }
                        });

                        this.expresslist = newData;
                        // this.expresslist.reverse();
                        console.log(this.expresslist, 'this.expresslist');

                        if (this.expresslist.length > 0) {
                            const updatePromises = [];
                            this.expresslist.forEach((item, index) => {
                                updatePromises.push(this.setTimelineLineHeight(index));
                            });
                            Promise.all(updatePromises).then(() => {
                                console.log('所有竖线高度更新完成');
                            });
                        }
                        resolve(res)
                    }else{
                        this.expresslist = []
                        this.logisticsTips=res.message
                        // reject(res)
                        resolve(res) // 改为resolve而不是reject
                    }
                    resolve(res)
                }).catch(error => {
                    console.log(error, 'error')
                    this.expresslist = []
                    resolve(error) // 改为resolve而不是reject
                })
            })
        }    
    }

}
</script>
<style lang="scss" scoped>
// @import '@/styles/variables.scss';

.content {
    background-color: #ffffff;
    display: flex;
    flex-direction:column;
    overflow:hidden;
    box-sizing: border-box;
    height:100vh;
    padding-bottom: calc(32rpx + env(safe-area-inset-bottom));
}
.scroll-content {
    flex: 1;
    height: 1px;
}

.pageTop {
    display: flex;
    align-items: center;
    padding-top: 10px;
    padding-left: 24px;
    padding-right: 24px;

    .tab-bar {
        display: flex;
        align-items: center;
        height: 20px;
        border-radius: 12px;

        .tabbar-item {
            flex: auto;
            z-index: 1;
            height: 20px;
            line-height: 20px;
            text-align: center;
            padding: 0px 18px;
            font-size: 12px;
            background-color: #F9F9F9;
            color: #666666;
            margin-right: 12px;
            border-radius: 8rpx;

            &.active {
                background: #FFFAF6;
                border-radius: 8rpx;
                // padding: 0px 5px;
                padding: 0px 18px;
                color: #FF6203;
                border: 1px solid #FF6203;
            }

        }
        .tab-bar :last-child{
            margin-right: 0px;
        }
    }
}

// .orderCode{
//     color: #FF6203;
//     font-size: 13px;
// }

.middle{
    padding:21px 0px;
    margin: 0px 24px;
    border-bottom: 1px solid #f9f9f9;

}
.orderStatus{
    font-size: 30px;
    color: #111111;
    line-height: 30px;
}
.describe{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top:23px;
}
.describeLeftTop{
    display: flex;
    align-items: center;
    .selfPickName{
        font-size: 14px;
        color: #111111;
        line-height: 14px;
    }
    .selfPickTel{
        font-size: 14px;
        color: #0094D9;
        line-height: 14px;
    }
}
.describeLeftbottom{
    font-size: 12px;
    color: #737373;
    line-height: 12px;
    margin-top:15px ;
}

.logistics{
    padding: 18px 24px 30px 24px ;
}
.orderWrapper{
    background-color: #f9f9f9;
    padding-top:20rpx;
}
.goodsBox{
    background-color: #ffffff;
    // margin-top:10px;
    padding: 24px;
}

.goodsWraper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-bottom: 10px;
  }

.goodsWraper:last-child {
    margin-bottom: 0px;
}

.wraper_left {
    display: flex;
    // float: left;
    width: 100%;

    .goodsPic {
        width: 27%;

        img {
            width: 100%;
            height: auto;
        }
    }

    .goodsText {
        position: relative;
        width: 67%;
        margin-left:28rpx;
        // width: 150px;
        display: flex;
        flex-direction: column;
        padding-top:10rpx;
        padding-bottom: 12rpx;
        text-align: left;

        .goodsTop {
            position: absolute;
            top: 2%;
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;

            .goods_T {
                font-size: 28rpx;
                text-align: left;
                color: #111111;
                max-width: 80%;
                line-height: 28rpx;
                // margin-top: 9px;  //display：flex   中 元素居中
                white-space: nowrap;
                /* 防止文本换行 */
                overflow: hidden;
                /* 超出部分隐藏 */
                text-overflow: ellipsis;
                /* 显示省略号 */

            }

            // 商品价格
            .goods_price {
                font-size: 28rpx;
                color: #737373;
                line-height: 28rpx;
            }
        }

        .googsMiddle {
            position: absolute;
            top: 30%;
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: 22rpx;
            color: #666666;

            .goods_specs {
                max-width: 80%;
                font-size: 22rpx;
                text-align: left;
                color: #666666;

                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: normal;
            }

            .goods_num {
                font-size: 11px;
                line-height: 11px;
                color: #666666;
            }

        }

        .goodsBottom {
            position: absolute;
            bottom: 10%;
            display: flex;
            align-items: center;
            justify-content: space-between;

            .money {
                font-size: 14px;
                text-align: left;
                color: #737373;
                line-height: 14px;
            }

            .jifen_box {
                font-size: 14px;
                text-align: left;
                color: #999999;
                line-height: 14px;
                height: 14px;
            }
        }
    }
}

.wraper_right {
    font-size: 22rpx;
    color: #666666;
    width: 10%;
    text-align: right;
}
// 价格明细
.price_detail {
    padding: 48rpx 0rpx;
    background-color: #ffffff;
    margin-top: 10px;

    .price_detail_content {
        border-bottom: 1px solid #f9f9f9;
        padding-bottom: 20px;
    }

    .price_detail_title {
        font-size: 20px;
        text-align: left;
        color: #111111;
    }

    .price_detail_box {
        margin-top: 17px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .num {
        font-size: 14px;
        text-align: right;
        color: #111111;
    }

    .num_o {
        font-size: 14px;
        text-align: right;
        color: #FF6203;
    }

    // 实付金额
    .payment {
        padding: 24px 0px;

    }

}

// 很多地方字体 颜色公用
.price_detail_name {
    font-size: 28rpx;
    text-align: left;
    color: #111111;
}

.price_detail_tips {
    font-size: 12px;
    text-align: left;
    color: #666666;
    margin-top: 5px;
}

.checked-img {
    height: 32rpx;
    width: 32rpx;
}

.payment_top {
    width: 100%;
    display: flex;
    justify-content: space-between;

    .paidAmount {
        font-size: 16px;
        color: #111111;
        line-height: 16px;
    }
}

.order_Detail {
    // padding-bottom: 100px;
}

// 订单编号
.order_Detail_box {
    margin-top: 34rpx;
    display: flex;
    justify-content: space-between;
}

.order_detail_num {
    display: flex;
    align-items: center;
}

.code {
    font-size: 24rpx;
    text-align: right;
    color: #888888;
    line-height: 24rpx;
}

.copy {
    font-size: 24rpx;
    text-align: right;
    color: #111111;
    line-height: 24rpx;
}

.checkDetail{
    margin-top: 24px;
    text-align: center;
    font-size: 24rpx;
    color: #888888;

}
::v-deep .van-nav-bar__left {
    width: 56px;
    height: 44px;
}

::v-deep .van-icon {
    color: #242629 !important;
}

// ::v-deep .orderCode .van-icon-arrow{
//     color:#FF6203 !important ;
// }


.service-timeline {
//   margin-top: 40rpx;
  padding-left: 30rpx;
}

.timeline-item {
  position: relative;
//   margin-bottom: 74rpx;
padding-bottom: 74rpx; 
}
// 左侧的点
.timeline-dot {
    position: absolute;
    left: -18rpx;
    top: 0;
    width: 36rpx;
    height: 36rpx;
    line-height: 36rpx;
    border-radius: 50%;

}
// 普通的点
.timeline-dot-normal{
    position: absolute;
    left: -9rpx;
    top: 7rpx;
    width: 18rpx;
    height: 18rpx;
    border-radius: 50%;
    background-color: #d4d4d4;
}
// 左侧第一个点
.timeline-dot-active{
    position: absolute;
    left: -18rpx;
    top: 0;
    width: 36rpx;
    height: 36rpx;
    line-height: 36rpx;
    background: url('https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/processDot.png') no-repeat;
    background-size: 100%;
}
// 下单
.timeline-dot-order{
    position: absolute;
    left: -18rpx;
    top: 0;
    width: 36rpx;
    height: 36rpx;
    line-height: 36rpx;
    background: url('https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/makeOrderIcon.png') no-repeat;
    background-size: 100%;
}
// 运输
.timeline-dot-transport{
    position: absolute;
    left: -18rpx;
    top: 0;
    width: 36rpx;
    height: 36rpx;
    line-height: 36rpx;
    background: url('https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/transportIcon.png') no-repeat;
    background-size: 100%;
}
// 自提点
.timeline-dot-selfPoint{
    position: absolute;
    left: -18rpx;
    top: 0;
    width: 36rpx;
    height: 36rpx;
    line-height: 36rpx;
    background: url('https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/selfPointIcon.png') no-repeat;
    background-size: 100%;
}
// 左侧active点
.active .timeline-dot {
  background-color: #ff6023;
}

// 左侧的竖线
.timeline-line {
  position: absolute;
  left:0px;
  top: 24rpx;
  bottom: 0;
  width: 2rpx;
  background-color: #ccc;
}
.timeline-line-active{
    background-color: #ff6023;
}
// 文字内容
.timeline-content {
  margin-left: 40rpx;
}
.timeline-text{
    font-size: 36rpx;
    line-height:36rpx;
    color: #111111;
}
.timeline-text-active{
    color: #ff6023;
}
.timeline-desc{
    font-size: 24rpx;
    color: #111111;
    margin-top: 28rpx;
}
.timeline-time {
  color: #888888;
  font-size: 24rpx;
  line-height: 24rpx;
  margin-top: 28rpx;
}
.last-item.timeline-line {
  display: none;
}
.last-item-timeline-line{
    height: 0rpx;
    display: none !important;
}


.timeline-desc-with-dot {
    position: relative;
    // padding-left: 58rpx; // 给原点留出空间
    margin-bottom: 10rpx; // 每个描述之间的间距

    &::before {
        content: ' ';
        position: absolute;
        left: -48rpx;
        top: 7rpx;
        // left:0px;
        // top: 24rpx;
        // bottom: 0;
        width: 18rpx;
        height: 18rpx;
        border-radius: 50%;
        background-color: #d4d4d4;
    }
}
</style>
